<template>
	<div id="address">
		<toptitle :conter="'收货地址'" :bgcolor="'#f00'"></toptitle>
		<div class="content">
			<ul>
				<li v-for="(item,index) in list" :key="item.ID">
					<div class="top">
						<div class="le">
							<span class="yuan">{{ item.name.slice(0,1) }}</span>
							<span>{{ item.name }}</span>
							<span>{{ item.phone }}</span>
						</div>
						<div class="ri" @click="$router.push('/users/address/Edit/'+item.ID)">
							编辑
						</div>
					</div>
					<div class="conter">
						{{ item.a_provice }}-{{ item.a_city }}-{{ item.a_code }}
					</div>
					<div class="a_desc">
						详细地址：{{ item.a_desc }}
					</div>
					<div class="bottom">
						<label>
							<input type="radio" name="radio" :id="'rao' + item.ID"
								:disabled="item.is_select == 1 ? true: false"
								:checked="item.is_select == 1 ? true: false" @change="radioChange($event,item)">
							<span>设为默认地址</span>
						</label>
					</div>
				</li>
			</ul>
		</div>
		<div class=" but">
			<router-link to="/users/address/Add"> 新增收货地址 </router-link>
		</div>
	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	// 修改用户信息
	import {
		getAddressList,
		editAddress
	} from "@/api/user"
	// 引入顶部栏组件
	import toptitle from "@/components/top_title.vue"
	export default {
		components: {
			// 注册顶部栏组件
			toptitle,
		},
		data() {
			return {
				// 收货地址列表
				list: []
			}
		},
		created() {
			this.getList();
		},
		methods: {
			// 判断单选框的变化
			radioChange(event, item) {
				// 让选中的元素 的is_select值 等于 选中的转换值
				item.is_select = Number(event.target.checked)
				// 给item添加一个键  address_id
				item.address_id = item.ID;
				// 调用修改收货地址接口
				editAddress(item).then(res => {
					console.log(res.data);
					// 如果修改成功 重新调用获取收货地址列表的接口
					if (res.data.code == 1) {
						this.$Message.success('设置成功');
						// 调用获取收货地址列表的接口
						this.getList();
					}
				})
			},
			getList() {
				getAddressList().then(res => {
					if (res.data.code == 1) {
						console.log("getAddressList", res)
						this.list = res.data.result
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#address {
		position: relative;
		padding-top: 44 * $width;
		padding-bottom: 104 * $width;
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;

		.content {
			width: 100%;

			ul {
				li {
					width: 90%;
					margin: 20 * $width 5%;
					background-color: #fff;
					padding: 10 * $width;
					box-sizing: border-box;
					border-radius: 10 * $width;

					>div {
						display: flex;
					}

					.top {
						height: 40 * $width;
						line-height: 40 * $width;
						justify-content: space-between;

						.le {
							span {
								margin-right: 20 * $width;
							}

							.yuan {
								width: 36 * $width;
								height: 36 * $width;
								background-color: #3286ff;
								color: #fff;
								display: inline-block;
								border-radius: 50%;
								text-align: center;
								line-height: 36 * $width;
								font-size: 18 * $width;
								margin-right: 10 * $width;
							}
						}

						.ri {
							color: #3286ff;
						}
					}

					.conter {
						line-height: 2;
					}

					.a_desc {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 2;
					}

					.bottom {
						margin-top: 5 * $width;

						label {
							align-items: center;

							input {
								margin-right: 5 * $width;
							}
						}
					}
				}
			}
		}



		.but {
			position: fixed;
			width: 100%;
			height: 50 * $width;
			bottom: 0 * $width;
			background-color: #fff;

			a {
				display: inline-block;
				width: 278 * $width;
				height: 34 * $width;
				line-height: 34 * $width;
				text-align: center;
				background-color: #e93323;
				border: none;
				border-radius: 17 * $width;
				margin: 8 * $width calc((100vw - 278 * $width) / 2);
				color: #fff;
			}
		}
	}
</style>
